<template>
    <div class="frame">
        <el-dialog
        :title=title
        :visible.sync="showIn"
        width="440px"
        :before-close="closeFrame"
        >  
        <div class="password" v-if="isExchange">
           <div  class="password-num">
               <p>验证密码</p>
               <div class="flex">
                    <input v-if="wordtyple==0" type="password" placeholder="DATx钱包交易密码" v-model="password">
                    <input v-else type="text" placeholder="DATx钱包交易密码"  v-model="password">
                    <!--<img class="showimg" src="@/assets/images/asset.png" alt="" @click="showPassword(1)">-->
                    <!--<img class="hideimg" src="@/assets/images/datx.png" alt="" @click="showPassword(0)"  >-->
               </div>
           </div>
           <div class="password-confirm">
               <p @click="confirm">提交</p>
           </div>
         </div>
        <div class="password" v-else>
          <div class="password-num">
             <p>ETH充值到账后，系统会自动将对应的DETH转到您的DATx账户。受限于ETH区块链网络性能，充值时间较长，请耐心等待。</p>
          </div>
        </div>
    </el-dialog>
    </div>
</template>
<script>
  import {sendTrx} from '../../service/ethService'
  import {validateSecret} from '../../utils/commonUtils'

  export default{
    data(){
        return{
             title:"验证密码",
             showIn:true,
             password:'',
             wordtyple:0,
             isExchange:true
         }
    },
  props: ["ethoutform"],
  created(){
  },
   methods:{
        // 转入
        closeFrame(){
           this.$emit('passwordListen',false)
        },
       showPassword(val){
           this.wordtyple=val
       } ,
     confirm(){
          console.log(this.ethoutform.address, this.ethoutform.to, this.password, this.ethoutform.amount,this.ethoutform.gasprice*Math.pow(10,9),this.ethoutform.gaslimit,'ETH',)
          if(validateSecret(this.password)){
            this.isExchange=false;
            this.title="注意"
            sendTrx(this.ethoutform.address, this.ethoutform.to, this.password, this.ethoutform.amount,this.ethoutform.gasprice*Math.pow(10,9),this.ethoutform.gaslimit,'ETH', (state,data)=>{
              console.log(state,data)
              if(state==null){
                this.$message.success("ETH转出成功")
                this.$emit('passwordListen',false)
              }else {
                this.$message.error("ETH转出失败")
                this.$emit('passwordListen',false)
              }
            })
          }else {
            this.$message.error(" 验证密码错误")
          }

     }

    } 
}
</script>
<style lang="less" scoped>
.frame{
   .password{
       padding: 0px 20px;
       &-num{
           p{
             color: #666666;
             padding:15px 0;  
           }
           input{
                width: 100%;
                height: 34px;
                padding: 0 10px;
                border-radius: 4px;
                border: solid 1px #eeeeee;
                background-color: #ffffff; 
                }
            input::-webkit-input-placeholder {
            font-size: 12px;
            color: #c5c7cb;   
            }
            div{
                position: relative;
                img{
                    width: 14px;
                    height: 10px;
                    display: block;
                    cursor: pointer;
                }
                .showimg{ 
                    position: absolute;
                    top:11px;
                    right: 8px;     
                }
                .hideimg{
                     position: absolute;
                     top:11px;
                     right: 28px;   
                }
            }
       }
       &-confirm{
            margin: 30px 0;
           p{
             color: #fff;
             border-radius: 4px; 
             text-align: center;
             line-height: 40px;
             background: #98889b;
             cursor: pointer;
           } 
           p:hover{
               opacity: .8;
           }
       }
   }
   input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active {
    -webkit-transition-delay: 99999s;
    -webkit-transition: color 99999s ease-out,
    background-color 99999s ease-out;
    }
}
</style>
<style lang="less" >
.frame{
    .el-dialog__wrapper{ 
        .el-dialog{
                    border-radius: 8px;
            }
            .el-dialog__header{
                border-bottom:1px solid #eaedf5;
                color:#000000;
                font-size: 18px;
                font-weight: bold;
                padding:20px;
            }
            .el-dialog__body{
                padding:30px 0;
            }
            .el-dialog__headerbtn .el-dialog__close{
                color: #666666;
                
        }
    }          
}


</style>

